<template>
  <div class="shopCar">
    <div class="buy_cart_container">
      <div class="buy_cartLeft">
        <div class="buy_cartImg" @click="showCart">
          <i class="iconfont icon-shangcheng1"></i>
        </div>
        <div class="buy_cartPrice">
          <div class="cart_price">${{totalMoney}}.00</div>
          <div class="peisongfei" style="text-align: left;">配送费5元</div>
        </div>
      </div>
      <div class="buy_cartRight" @click="commitOrder">去结算</div>
    </div>
    <div class="shop-list" v-show="cartshow">
      <div class="header">
          <p>购物车</p>
          <div>
              <i></i>
              <span>清空</span>
          </div>
      </div>
      <div class="shop-list-wrapper">
          <ul>
              <li class="shop-list-content" v-for="(item, index) in cartList" :key="index">
                  <div class="shop-list-left">{{item.name}}</div>
                  <div class="shop-list-middle">￥{{item.price}}</div>
                  <div class="shop-list-right">{{item.count}}</div>
              </li>
          </ul>
      </div>
  </div>
  </div>
</template>
<script>
  import Cookie from "js-cookie";
  // import carcontrol from "@/components/carcontrol.vue";
  export default {
    name: "cart",
    data() {
      return {
        carFood: "",
        food: "",
        cartList: "",
        cartshow: false,
      }
    },
    computed: {
      totalMoney(){
        let shopId = Cookie.get("shopId");
        return this.$store.getters.getAllMoney(shopId);
      }
    },
    methods: {
      commitOrder() {
        this.$router.push({ name: 'commitOrder' });
      },
      showCart() {
        // if (localStorage.getItem("car").length == 2 || localStorage.getItem("car").length == 0) {
        //   console.log("购物车无数据");
        // } else {
        //   this.cartshow = !this.cartshow;
        //   this.cartList = JSON.parse(localStorage.getItem("car"));
        // }
        console.log(this.$store.getters.getAllMoney({shopId: Cookie.get("shopId")}));
      }
    }
  }
</script>
<style lang="less" scoped>
  .buy_cart_container {
    background-color: burlywood;
    width: 100%;
    height: 7%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
  }

  .buy_cartLeft {
    width: 70%;
    background-color: black;
  }

  .buy_cartRight {
    width: 30%;
    background-color: #4cd964;
    color: white;
    font-weight: 600;
    font-size: 0.5rem;
    padding: 0.3rem 0;
  }

  .buy_cartPrice {
    color: white;
    float: left;
    height: 100%;
  }

  .buy_cartImg {
    float: left;
  }

  .cart_price {
    font-size: 0.5rem;
    font-weight: 600;
    margin-top: 0.2rem;
    letter-spacing: 0.03rem;
  }
  .icon-shangcheng1 {
    color: deepskyblue;
    font-size: 1rem;
    margin: 0 0.5rem;
  }
  .shopCar>span {
    color: white;
  }

  .shop-list {
    position: fixed;
    left: 0;
    bottom: 48px;
    /*no*/
    width: 100%;
    height: 3rem;
    background: white;
  }

  .header {
    display: flex;
    width: 100%;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    line-height: 70px;
    box-sizing: border-box;
    background-color: #eceff1;
    font-size: .4rem;
    ;
  }

  .shop-list-wrapper {
    padding: 30px 20px;
    box-sizing: border-box;
    font-size: 0.4rem;
  }

  .shop-list-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
  }
  .shop-list-left{
    width: 70%;
    text-align: left;
  }
  .shop-list-middle{
    width: 24%;
    text-align: left;
  }
  .shop-list-right{
    width: 6%;
    text-align: left;
  }
</style>